<style lang="less">
.inpt{
    max-width: 320px;;
}
</style>
<template>
  <page-default>
<q-card style="width: 600px; max-width: 80vw;margin: 20px auto;">
        <q-card-section>
           <q-input 
            filled
            :disable="upstream_service.type == 1"
            class="inpt"
            v-model="upstream_service.name"
            label="名称(只可是字母不区分大小写)"
            lazy-rules
            :rules="[ val => val && val.length > 0 || '必填项目']"
        />
         <q-toggle v-model="upstream_service.ishcheck" label="健康检查" />
           <template v-if="upstream_service.ishcheck">
            <q-input 
            filled
            class="inpt"
            v-model="upstream_service.healthcheck"
            label="健康检查路径"
            lazy-rules
            :rules="[ val => val && val.length > 0 || '必填项目']"
        />
        <q-input 
            filled
            class="inpt"
            v-model="upstream_service.interval"
            label="检查间隔(s)"
            lazy-rules
            :rules="[ val => val && val.length > 0 || '必填项目']"
        />
        <q-input 
            filled
            class="inpt"
            v-model="upstream_service.timeout"
            label="超时时间(s)"
            lazy-rules
            :rules="[ val => val && val.length > 0 || '必填项目']"
        />
           </template>
           
        </q-card-section>

         <q-card-section>      
           <q-input bottom-slots v-model="upstream_service.upstream[index]" v-for="(val, index) in upstream_service.upstream" :key="index" :label="'('+(index+1)+')upstream 地址'">
                <template v-slot:hint>
                upstream
                </template>
                    <template v-slot:before v-if="upstream_service.upstream.length>1">
                            <q-btn @click="delUpstream(index)" round dense flat icon="close" />
                    </template>
                <template v-slot:append v-if="upstream_service.upstream.length<5">
                <q-btn @click="addUpstream(index)" round dense flat icon="add" />
                </template>
            </q-input>
        </q-card-section>


        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="取消" v-close-popup />
          <q-btn flat label="保存" @click="saveupstream" />
        </q-card-actions>


      </q-card>


  </page-default>
</template>

<script>

import { mapActions, mapGetters } from 'vuex'
import DiyService from '../../../_services/DiyService'
import PageDefault from '../../../components/_commons/PageDefault'

export default {
  name: 'PageHTTPMiddlewares',
  components: {
    PageDefault,
  },
  data () {
    return {
        srvname: "",
        upstream_status: !1,
        upstreamlist:[""],
        hasmid: false,
        upstream_service:{
            type: 0,
            name:"",
            ishcheck: false,
            healthcheck:"/",
            interval: "10s",
            timeout: "3s",
            upstream:[""],
        }
    }
  },
  methods: {
    newUpst(){
      this.upstream_status = true
      this.upstream_service ={
            type: 0,
            name:"",
            ishcheck: false,
            healthcheck:"/",
            interval: "10s",
            timeout: "3s",
            upstream:[""],
        }
    },
    saveRouter(){
      DiyService.saveRouter(this.form)
        .then(body => {
          
          this.$q.dialog({
            dark: true,
            title: '提示',
            message: body.message
          })
        })
        .catch(error=>{
          console.log(error)
          return Promise.reject(error)
        })
    },
    saveupstream(){
       DiyService.saveService(this.upstream_service)
        .then(body => {
          this.$q.dialog({
            dark: true,
            title: '提示',
            message: body.message
          })
        })
        .catch(error => {
         this.$q.dialog({
            dark: true,
            title: '提示',
            message: "保存失败,请刷新页面"
          })
          return Promise.reject(error)
        })
    },
    addUpstream(index){
        let upstream = this.upstream_service.upstream
        upstream.splice(index, 0, "")
        this.upstream_service.upstream = upstream
    },
    delUpstream(index){
        let upstream = this.upstream_service.upstream
        upstream.splice(index, 1)
        this.upstream_service.upstream = upstream
    },
    refreshAll(){
      if (this.$route.params.name){
          let str = this.$route.params.name
          let sar = str.split("@")
          this.srvname = sar[0]
        DiyService.getSrv(this.srvname)
        .then(body => {
          console.log(body)
         if(body.error == 0){
            this.upstream_service = body.data
          }
          return body
        }).catch(error=>{
          return Promise.reject(error)
        })
      }
        
    },
    getupstream(){
        DiyService.getupstream()
        .then(body => {
          console.log(body)
          if (body.error == 0 && body.data.length>0)
            this.upstreamlist = body.data
          return body
        }).catch(error=>{
          return Promise.reject(error)
        })
    },
  },
  watch: {
    'status' () {
      this.refreshAll()
    },
    'filter' () {
      this.refreshAll()
    }
  },
  mounted () {
    this.refreshAll()
    this.getupstream()
  },
  beforeDestroy () {
  }
}
</script>

<style scoped lang="scss">

</style>
